/**********************************************
 * 购物车一栏
 */

window.onload = function(){	
	// 显示商品
	var ul = $("#listall ul");
	var arr = db.fruit;
	var l = arr.length;
	var i = 0;
	var arrElem = [];
	for(; i<l; i++){
		var obj = arr[i];
		var li = document.createElement("li");
		li.innerHTML = '<a class="lianjie" href="xiangqin.html?id='+obj.id+'"><div id="main-good"><img src="../img/'+obj.img+'" alt="" /><h3>￥'+obj.price+'</h3><p><a>'+obj.title+'</a></p><em><a>'+obj.title+'</a></em><span id="s'+obj.id+'"></span><span id="i'+obj.id+'"></span><div class="cart1"><div class="fuhao"><input type="text" value="1" /><a onclick="jia()">+</a><a onclick="jian()">-</a></div><div class="add"><button onclick="addCart('+obj.id+')">加入购物车</button></div></div></div></a>';		
		ul.append(li);
		var elem = document.getElementById("s"+obj.id);
		elem.id = obj.id;
		arrElem.push(elem);
	}
	show();
	
	// 购物车栏
	var span1 = document.getElementById("span1");	
	var ol = document.getElementById("ol");
	ol.onmouseover = span1.onmouseover = function(){
		startMove(ol, {"right":50});
	}
	ol.onmouseout = span1.onmouseout = function(){
		startMove(ol, {"right":-200});
	}
	var ol = document.getElementById("ol");
	ol.onclick = function(){
		location.href = "gouwuche.html";
	}
}
// 显示购物车商品
function show(){
	var ol = document.getElementById("ol");
	ol.innerHTML = "";
	var arr = getAllCookie();
	l = arr.length;
	i = 0;
	var sum = 0;
	for(; i<l; i++){
		var obj = arr[i];
		var li = document.createElement("li");
		li.innerHTML = "<div class='mleft'><img src='../img/"+obj.img+"'></div><div class='mright'><p>"+obj.title+"</p>数量：<a onclick='jia("+obj.id+")'>+</a>"+obj.num+" <a onclick='jian("+obj.id+")'>-</a><br><p class='red'>总价：￥"+(obj.price*obj.num)+'</p></div>';
		ol.appendChild(li);
		sum = sum + Number( obj.num );
	}
	document.getElementById("span1").innerHTML = sum;
}	
// 将商品添加到购物车

function addCart(id){
	// 判断该商品是否已经添加到购物车
	var str;
	var obj;
	var num;
	str = getCookie("g"+id);
	if( str=="" ){
		// 之前没有存储过
		num = 1;
	}else{
		// 之前有存储过
		obj = JSON.parse(str);
		num = Number(obj.num) + 1;
	}
	// 根据id获得对象
	obj = getObject(id);
	str = '{"id":"'+id+'", "title":"'+obj.title+'", "img":"'+obj.img+'", "price":"'+obj.price+'", "num":"'+num+'"}';
	setCookie("g"+id, str, 10);
	//show();	//直接显示购物车
	var elem = document.getElementById("i"+id);	// 获得当前被点击的按钮所在的商品图片
	console.log(elem)
	var img1 = document.createElement("img");
	document.body.appendChild(img1);
	img1.src = "../img/"+obj.img;
	img1.style.position = "absolute";
	img1.style.left = elem.offsetLeft+"px";
	img1.style.top = elem.offsetTop +"px";
	//img1.style.opacity=1
	// 目标点	
	var st = document.documentElement.scrollTop || document.body.scrollTop;
	var targetX = span1.offsetLeft+slide.offsetLeft;
	var targetY = span1.offsetTop+slide.offsetTop+st+10;
	startMove(img1, {"left":targetX, "top":targetY, "width":40, "height":40}, function(){
		//document.getElementById("span1").innerHTML = Number(document.getElementById("span1").innerHTML)+1;
		//img1.style.opacity=0
		document.body.removeChild(img1);
		show();
	});
}

// 减少商品数量
function jian(id){
	var str = getCookie("g"+id);
	var obj = JSON.parse(str);
	var num = Number(obj.num) - 1;
	if( num <= 0 ){
		setCookie("g"+id, "", -10);
	}else{
		str = '{"id":"'+id+'", "title":"'+obj.title+'", "img":"'+obj.img+'", "price":"'+obj.price+'", "num":"'+num+'"}';
		setCookie("g"+id, str, 10);
	}
	show();
}
// 增加商品数量
function jia(id){
	var str = getCookie("g"+id);
	var obj = JSON.parse(str);
	var num = Number(obj.num) + 1;
	if( num <= 0 ){
		setCookie("g"+id, "", -10);
	}else{
		str = '{"id":"'+id+'", "title":"'+obj.title+'", "img":"'+obj.img+'", "price":"'+obj.price+'", "num":"'+num+'"}';
		setCookie("g"+id, str, 10);
	}
	show();
}

// 根据商品ID，求商品其他的属性
function getObject(id){
	var arr = db.fruit;
	var l = arr.length;
	var i = 0;
	for(; i<l; i++){
		var obj = arr[i];
		if( obj.id == id ){
			return obj;
		}
	}	
}

// 获取所有的商品cookie
function getAllCookie(){
	var coll = [];	// 自定义空数组，保持商品cookie的值
	var str = document.cookie;
	var arr = str.split("; ");
	var i = 0;
	var l = arr.length;
	for(; i<l; i++){
		var col = arr[i].split("=");
		// 因为网站内有可能有很多种cookie，所以这里只把购物车的cookie取出来
		if( /^g\d+$/.test(col[0]) ){
			// cookie值在创建时，用到了编码，所以获取时，要解码
			// cookie值是字符串，'{"id":"1", "title","标题"}'		需要把字符串转为 json 对象
			// 把json对象追加到数组中
			coll.push( JSON.parse(decodeURIComponent(col[1])) );
		}
	}
	return coll;
};
